import Vue from "vue";

// 拖拽指令 放在element中的card上 拖拽有延迟，自己封装了一个card卡片（bug）
// 使用格式:v-card-drag
Vue.directive("cardDrag", {
  inserted(el, binding, vnode, oldVnode) {
    const headerElement = el.querySelector(".ss__card__header");
    const dragDialog = el;

    console.log(dragDialog);
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty =
      dragDialog.currentStyle || window.getComputedStyle(dragDialog, null);
    if (headerElement) {
      headerElement.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - headerElement.offsetLeft;
        const disY = e.clientY - headerElement.offsetTop;
        // 获取到的值带px 正则匹配替换
        let styL, styT;
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes("%")) {
          styL =
            +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
          styT =
            +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
        } else {
          styL = +sty.left.replace(/\px/g, ""); // 写成/px/g 也行
          styT = +sty.top.replace(/\px/g, "");
        }
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX;
          const t = e.clientY - disY;
          console.log(disX);
          // 移动当前元素
          dragDialog.style.left = `${l + styL}px`;
          dragDialog.style.top = `${t + styT}px`;

          // 将此时的位置传出去
          // binding.value({x:e.pageX,y:e.pageY})
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  },
});

// 基于element Dialog 封装的可拖拽功能
// 使用格式:v-dialog-drag
Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    console.log(el);
    const headerElement = el.querySelector(".el-dialog__header");
    const dragDialog = el.querySelector(".el-dialog");
    headerElement.style.cursor = "move";

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty =
      dragDialog.currentStyle || window.getComputedStyle(dragDialog, null);

    headerElement.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - headerElement.offsetLeft;
      const disY = e.clientY - headerElement.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, ""); // 写成/px/g 也行
        styT = +sty.top.replace(/\px/g, "");
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;
        console.log(disX);
        // 移动当前元素
        dragDialog.style.left = `${l + styL}px`;
        dragDialog.style.top = `${t + styT}px`;

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});


// 只允许输入int类型数字的自定义指令
// 使用格式:v-enter-number-int
Vue.directive('enterNumberInt', {
  inserted(el) {
    // if (ele.tagName.toLocaleUpperCase() !== 'INPUT') {
    //   const el = ele.getElementsByTagName('input')[0]
    el.addEventListener('keypress', function (e) {
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d/
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
    // }
  },
})

// 允许输入浮点型数字 跟 '.'  且只能有俩位小数 的自定义指令
// numberFloat 允许输入的小数位数
// 使用格式: v-enter-number-float="3"

/*

  1.基于element 中input组件封装的（若想使用在原生input上请往下看）
  2.element 中的 input输入框 是基于input封装的所以最外层是已div包裹的，所以要 el.__vue__.value（个人猜测，跟debugger所得的结果）
  3.原生input 框只需要 el.value  就可以了
  4.系统中都是用element input框 所以此处就不做适配了

 */
Vue.directive('enterNumberFloat', {
  inserted(el, numberFloat) {
    el.addEventListener('keypress', function (e) {
      // debugger
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d/
      // 小数点后只能有俩位小数
      let inputValue = el.__vue__.value
      // element 中的 input输入框 是基于input封装的所以最外层是已div包裹的，所以要 el.__vue__.value（个人猜测，跟debugger所得的结果）
      // 原生input 框只需要 el.value  就可以了
      // 系统中都是用element input框 所以此处就不做适配了
      if (inputValue.includes('.') && inputValue.toString().split('.')[1].length > numberFloat.value - 1) {
        e.preventDefault()
      }
      if (charcode == 46) {
        if (inputValue.includes('.')) {
          e.preventDefault()
        }
      } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  },
})
